<template>
  <div class="container">
    <!-- 搜索栏 -->
    <van-search placeholder="搜索商品" class="search-bar" />

    <!-- 分类图标 -->
    <van-grid column-num="4" class="category-grid">
      <van-grid-item 
        v-for="item in tag_lst" 
        :key="item.id" 
        icon="photo-o"
        @click="navigateTo('Category', item.id)"
      >
        <img :src="item.t_img" alt="分类图标" class="grid-icon" />
        <div class="grid-text">{{ item.t_name }}</div>
      </van-grid-item>
    </van-grid>

    <!-- 限时优惠 -->
    <div class="discount-section" @click="navigateTo('Discount')">
      <van-count-down
        :time="countDownTime"
        format="HH : mm : ss"
        class="count-down"
      >
        <template #default="{ days, hours, minutes, seconds }">
          <span class="count-down-text">限时优惠</span>
          <span class="count-down-number">{{ hours }}</span> :
          <span class="count-down-number">{{ minutes }}</span> :
          <span class="count-down-number">{{ seconds }}</span>
        </template>
      </van-count-down>

      <van-grid column-num="4" class="discount-grid">
        <van-grid-item v-for="item in discountList" :key="item.id" @click="navigateToProductDetail(item.id)">
          <img :src="item.icon" alt="商品" class="discount-icon" />
          <div class="price">
            <span class="current-price">¥{{ item.currentPrice }}</span>
            <span class="original-price">¥{{ item.originalPrice }}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 新人专享价 -->
    <div class="new-user-section" @click="navigateTo('NewUser')">
      <div class="section-header">
        <span>新人专享价</span>
        <van-icon name="arrow" class="more-icon" />
      </div>
      <van-grid column-num="4" class="new-user-grid">
        <van-grid-item v-for="item in newUserList" :key="item.id" @click="navigateToProductDetail(item.id)">
          <img :src="item.icon" alt="新人商品" class="new-user-icon" />
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Search, Grid, GridItem, CountDown, Icon } from 'vant';
import http from "../../http/index";

// 封装获取数据的函数
const getCategoryList = () => [
  { id: 1, icon: '../../src/assets/18.png', title: '护肤品' },
  { id: 2, icon: '../../src/assets/20.png', title: '家居' },
  { id: 3, icon: '../../src/assets/21.png', title: '数码' },
  { id: 4, icon: '../../src/assets/22.png', title: '零食' },
  { id: 5, icon: '../../src/assets/18.png', title: '洗护' },
  { id: 6, icon: '../../src/assets/23.png', title: '服饰' },
  { id: 7, icon: '../../src/assets/24.png', title: '潮鞋' },
  { id: 8, icon: '../../src/assets/25.png', title: '更多' }
];

const getDiscountList = () => [
  { id: 1, icon: '../../src/assets/25.png', currentPrice: 590, originalPrice: 600 },
  { id: 2, icon: '../../src/assets/21.png', currentPrice: 590, originalPrice: 600 },
  { id: 3, icon: '../../src/assets/22.png', currentPrice: 590, originalPrice: 600 },
  { id: 4, icon: '../../src/assets/23.png', currentPrice: 590, originalPrice: 600 }
];

const getNewUserList = () => [
  { id: 1, icon: '../../src/assets/15.png' },
  { id: 2, icon: '../../src/assets/14.png' },
  { id: 3, icon: '../../src/assets/13.png' },
  { id: 4, icon: '../../src/assets/12.png' }
];

// 分类标签数据
const tag_lst = ref([])
const get_tag = () => {
  http.get('/home/tag/').then(res => {
    tag_lst.value = res.data;
  }) 
}

// 帖子数据
const tiezi_lst = ref([])
const get_tiezi = () => {  
  http.get('/home/tiezi/').then(res => {  
    tiezi_lst.value = res.data;
  })  
}

// 初始化加载数据
onMounted(() => {
  get_tiezi();
  get_tag();
})

// 分类数据
const categoryList = ref(getCategoryList());

// 限时优惠倒计时
const countDownTime = ref(Date.now() + 3 * 24 * 3600 * 1000);

// 限时优惠商品
const discountList = ref(getDiscountList());

// 新人专享商品
const newUserList = ref(getNewUserList());

const router = useRouter();
// 导航函数
const navigateTo = (name, categoryId) => {
  router.push({ 
    name, 
    params: { categoryId } 
  });
};

// 跳转到商品详情页
const navigateToProductDetail = (productId) => {
  router.push({ name: 'ProductDetail', params: { productId } });
};

// 可以添加更多的计算属性或方法来处理复杂逻辑
</script>

<style scoped>
.container {
  padding: 16px;
  background-color: #f5f5f5;
}

.search-bar {
  margin-bottom: 16px;
}

.category-grid {
  margin-bottom: 16px;
  background-color: #f0fff0;
  padding: 16px 0;
}

.grid-icon {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.grid-text {
  font-size: 14px;
  margin-top: 8px;
}

.discount-section {
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ffecf5, #e6e6fa);
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.count-down {
  margin-bottom: 16px;
}

.count-down-text {
  font-size: 16px;
  color: #333;
  margin-right: 8px;
}

.count-down-number {
  font-size: 16px;
  color: #ff4d4f;
  padding: 4px 8px;
  background-color: #fff;
  border-radius: 4px;
}

.discount-grid .van-grid-item {
  padding: 8px;
}

.discount-icon {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.price {
  margin-top: 8px;
  text-align: center;
}

.current-price {
  color: #ff4d4f;
  font-size: 14px;
}

.original-price {
  color: #999;
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 4px;
}

.new-user-section {
  background-color: #e6f7ff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.more-icon {
  font-size: 14px;
  color: #666;
}

.new-user-grid .van-grid-item {
  padding: 8px;
}
</style>